{% extends "manage/layout.html" %}

{% set page_title = '用户反馈' %}

{% block css %}
<style type="text/css">
	th:last-child, td:last-child{
		width: 500px;
	}
</style>
{% endblock %}

{% block content %}
<div class="m-content">
	<h3>来自机构的反馈</h3>
	<table class="table table-striped table-condensed table-bordered" style="word-break:break-all; word-wrap:break-word;">
		<thead>
			<tr>
				<th>机构</th>
				<th>联系方式</th>
				<th>留言日期</th>
				<th>内容</th>
			</tr>
		</thead>
		<tbody>
			{% for msg in teacher_messages %}
			<tr id="school_{{ msg.id }}">
				<td>{{ msg.school_name }}<br />({{ msg.username }})</td>
				<td>{{ msg.contact_phone }}</td>
				<td>{{ msg.created_at }}</td>
				<td>
					<div>
						{% for para in msg.paragraphs %}
						<p>{{ para }}</p>
						{% endfor %}
					</div>
					<!--click show image in dialog-->
					{% for image_path in msg.images_path %}
					<img width="50px" height="50px"  src="{{ image_path }}"></img>
					{% endfor %}
					<!--click download file-->
					{% for file_path, file_name in msg.files_path %}
					<a src="{{ file_path }}">{{ file_name }}</a>
					{% endfor %}
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	<h3>来自学生的反馈</h3>
	<table class="table table-striped table-condensed table-bordered">
		<thead>
			<tr>
				<th>机构</th>
				<th>联系方式</th>
				<th>留言日期</th>
				<th>内容</th>
			</tr>
		</thead>
		<tbody>
			{% for msg in student_messages %}
			<tr id="student_{{ msg.id }}">
				<td>{{ msg.school_name }}<br />({{ msg.username }})</td>
				<td>{{ msg.contact_phone }}</td>
				<td>{{ msg.created_at }}</td>
				<td>
					<div>
						{% for para in msg.paragraphs %}
						<p>{{ para }}</p>
						{% endfor %}
					</div>
					<!--click show image in dialog-->
					{% for image_path in msg.images_path %}
					<img width="50px" height="50px"  src="{{ image_path }}"></img>
					{% endfor %}
					<!--click download file-->
					{% for file_path, file_name in msg.files_path %}
					<a src="{{ file_path }}">{{ file_name }}</a>
					{% endfor %}
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>


<!--modal dialog used for showing the feedback image-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalTitle">反馈原图</h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% block js %}
<script type="text/javascript">
$(function(){
	$('td>img').bind('click',function(){
		console.log('adsfas');
		var src = $(this).attr('src');
		var htmlStr = '<img src="' + src + '" />';
		$('#myModal .modal-body').html(htmlStr);
		$('#myModal').modal('show');
		$('.modal-body>img').width('800px');
	});
	$('td>a').bind('click',function(){
		var src = $(this).attr('src');
		window.open(src);
	});
});

</script>
{% endblock %}
